<template>
    <div class="specification">
        <p class="p1">
            商品规格
        </p>

        <div class="tab">
            <p class="p2">规格搜索：<el-input class="inps" v-model="input" placeholder="请输入内容"></el-input>
            <el-button type="primary" @click="searchFun" icon="el-icon-search">搜索</el-button>
            </p>
            <p class="p3">
                <el-button type="primary" icon="el-icon-plus">添加商品规格</el-button>
                <el-button>批量删除</el-button>
            </p>

            <el-table
                v-loading="loading"
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                type="selection"
                width="55">
                </el-table-column>
                <el-table-column
                label="ID"
                width="120">
                <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <el-table-column
                prop="rule_name"
                label="规格名称"
                width="120">
                </el-table-column>
                <el-table-column
                prop="attr_name"
                label="商品规格"
                show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                label="商品属性"
                show-overflow-tooltip>
                <template slot-scope="scope">{{ scope.row.rule_value | shuju }}</template>
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @current-change="handleCurrentChange"
                @prev-click="prevFun"
                @next-click='nextFun'
                :current-page="page"
                :page-size="limit"
                layout="total, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import {guigeList,guigeSearch,guigedel} from '../../api/index'
export default {
    data(){
        return {
            input:'',
            tableData:[],
            multipleSelection: [],
            page:1,
            limit:5,
            total:0,
            loading:true
        }
    },
    filters:{
        shuju(val){
            let arr = []
            let vals = JSON.parse(val);
            vals.forEach(v => {
                v.detail.forEach(z => {
                    arr.push(z)
                })
            })
            return arr.join(',')
        }
    },
    created(){
        this.joint()
        
    },
    methods: {
        searchFun(){
            console.log(this.input);
            guigeSearch({page:this.page,limit:this.limit,name:this.input}).then(res => {
                console.log(res.data);
                if (res.data.status === 200) {
                this.$message({
                message: '搜索数据成功',
                type: 'success'
                });

                this.tableData = res.data.data.list
                this.total = res.data.data.count
            }else{
                this.$message.error('搜索数据失败')
            }
            },err => {
                console.log(err);
            })
        },
        joint(){
            guigeList({page:this.page,limit:this.limit}).then(res => {
            console.log(res.data);
            if (res.data.status === 200) {
                this.$message({
                message: '获取数据成功',
                type: 'success'
                });
                this.loading = false
                this.tableData = res.data.data.list
                this.total = res.data.data.count
            }else{
                this.$message.error('获取数据失败')
            }
        },err => {
            console.log(err);
        })
        },
      handleCurrentChange(val) {
        this.page = val;
        this.joint();
      },
      prevFun(val) {
        this.page = val;
        this.joint();
      },
      nextFun(val) {
        this.page = val;
        this.joint();
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        //console.log(index, row);

       this.$confirm('确定要删除规格吗？删除规格后将无法恢复，请谨慎操作！', '删除规格', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            
            guigedel(row.id).then(res => {
                if (res.data.status === 200) {
                this.$message({
                message: '删除数据成功',
                type: 'success'
                });
                
                this.joint();
            }else{
                this.$message.error('删除数据失败')
            }
            },err => {
                console.log(err);
            })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });

        
      }
    }
}
</script>

<style lang="scss">
    .p1{
        width: 100%;
        height: 50px;
        font-size: 18px;
        display: flex;
        align-items: center;
        background: white;
        padding: 0 8px;
        box-sizing: border-box;
    }

    .tab{
        width: 100%;
        height: 500px;
        background: white;
        margin-top: 6px;
        .p2{
            width: 100%;
            height: 66px;
            display: flex;
            align-items: center;
            font-size: 14px;
            padding: 10px;
            box-sizing: border-box;
            .inps{
                width: 200px;
            }
        }
        .p3{
            width: 100%;
            height: 66px;
            padding: 0 10px;
            box-sizing: border-box;
        }
    }
</style>
